<!-- torrentFreakTop10.html -->
<div style="padding:30px">
  <div style="align:center"><center>
    <button style='color: black;' ng-click="vm.prevItem()" ng-disabled="vm.itemIndex == vm.items.length - 1"> &lt; <span translate-once>COMMON/previous/lbl</span> </button>
    <button style='color: black;' ng-click="vm.nextItem()" ng-disabled="vm.itemIndex == 0"> <span translate-once>COMMON/next/lbl</span> &gt;</button>
    <button type="button" class="close" ng-click="vm.closeSidePanel()" class="pull-right" uib-tooltip="{{'COMMON/close/btn'|translate}} {{'ACTIONBAR/watchlist/tooltip'|translate}}" tooltip-placement="left">&times;</button>
  </center></div>
  <div ng-if="vm.activeItem">
  <h2>{{vm.activeItem.title}}</h2>
    <table class="table table-condensed table-light">
      <thead>
        <tr>
          <th style="width:85px" translate-once>TORRENTFREAK/rank/hdr</th>
          <th translate-once>COMMON/title/hdr</th>
          <th style="width:85px" translate-once>COMMON/rating/hdr</th>
          <th style="width:85px" translate-once>TORRENTFREAK/info/hdr</th>
        </tr>
      </thead>
      <tr ng-repeat="row in vm.activeItem.top10">
        <td>
          <strong style='color:white'>{{::row.rank}} / ({{::row.prevRank}})</strong>
        </td>
        <td>
          <a href="{{row.imdb}}" uib-tooltip="IMDB" target="_blank">
            <strong>{{::row.title}}</strong>
          </a>
        </td>
        <td style='color:white'>{{::row.rating}}</td>
        <td>
          <a href="{{::row.trailer}}" uib-tooltip="{{'COMMON/watch-trailer/tooltip'|translate}}" target="_blank" style="padding:2px">
            <i class="glyphicon glyphicon-film"></i>
          </a>
          <torrent-dialog q="row.searchTitle" style="padding:2px"></torrent-dialog>
        </td>
      </tr>
    </table>
  </div>
</div>
